let path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const html = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports ={
  mode:'production',
  // entry:'./src/index.js',
  entry:{
    index:'./src/index.js',
    other:'./src/other.js'
  },
  output:{
    // filename:'index.[hash:4].js',
    // path:path.resolve(__dirname,'dist')
    filename:'[name].[hash:4].js',
    path:path.resolve(__dirname,'dist')
  },
  optimization: {
    minimizer:[
      new OptimizeCssAssetsPlugin(),
      new TerserPlugin()
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new html({
      template:'./public/index.html',
      filename:'index.html',
      title:'qqq',
      chunks:['index','other']
    }) ,
    new html({
      template:'./public/onther.html',
      filename:'other.html',
      title:'qqq',
      chunks:['other']
    }) ,
    new MiniCssExtractPlugin({
      filename:'[name].[hash:4].css'
    })
  ],
  module:{
    rules:[
      {
        test:/\.css$/,
        
        use:[{
          loader:MiniCssExtractPlugin.loader,
          options:{
            esModule:true
          }
        },'css-loader','postcss-loader']
      },
      {
        test:/\.less$/,
        use:[{
          loader:MiniCssExtractPlugin.loader,
          options:{
            esModule:true
          }
        },'css-loader','postcss-loader','less-loader']
      },
      {
        test:/\.(png|jpg|jpeg)$/,
        use:{
          loader:'url-loader',
          options:{
            name:'img/[name].[ext]',
            // 如果 图片的大小 超过了 100kb 则使用file-loader
            // 若不超过 则转成base64
            limit:10*1024
          }
        }
      }


      // {
      //   test:/\.css$/,
      //   // css-loader  只负责解析css文件
      //   // style-loader  负责把解析的css文件 放到页面里边
      //   // loader的加载顺序 时从右向左
      //   // use:['style-loader','css-loader']
      //   use:[{
      //     loader:'style-loader',
      //     options:{
      //       insert: function insertAtTop(element) {
      //         var parent = document.querySelector('head');
      //         // eslint-disable-next-line no-underscore-dangle
      //         var lastInsertedElement =
      //           window._lastElementInsertedByStyleLoader;

      //         if (!lastInsertedElement) {
      //           parent.insertBefore(element, parent.firstChild);
      //         } else if (lastInsertedElement.nextSibling) {
      //           parent.insertBefore(element, lastInsertedElement.nextSibling);
      //         } else {
      //           parent.appendChild(element);
      //         }

      //         // eslint-disable-next-line no-underscore-dangle
      //         window._lastElementInsertedByStyleLoader = element;
      //       }
      //     }
      //   },'css-loader']
      // },
      // {
      //   test:/\.less$/,
      //   use:['style-loader','css-loader','less-loader']
      // }


    ]
  }
}